<template>
  <div class='photoInfo-container'>
    <div class="photoInfo">
      <h4 class='photoInfo-title'>{{ photoInfo.title }}</h4>
      <p class="photoInfo-sub">
        <span>发布时间：{{ photoInfo.add_time |dataFormat }}</span>
        <span>浏览次数：{{ photoInfo.click }}</span>
      </p>
      <hr>
      <div>
        <!-- 缩略图 -->
        <vue-preview :slides="photoImg" @close="handleClose"></vue-preview>
        <!-- 内容 -->
        <div class="photoInfo-content" v-html="photoInfo.content"></div>
      </div>
    </div>
    <!-- 评论组件 -->
    <cm-box :id='id'></cm-box>
    
  </div>
</template>

<script>

import { Toast } from "mint-ui";
// 引入评论组件s
import comment from '../../compoents/subcompoents/comment.vue';

export default {
  data: function() {
    return {
      id: this.$route.params.id, //存放url传过来的id
      photoInfo: [],
      photoImg:[]  //图片缩略图
    };
  },
  created() {
    this.getPhotoInfo();
    this.getImg();
  },
  methods: {
    getPhotoInfo() {
      this.$http.get("api/getimageInfo/" + this.id).then(result => {
        if (result.body.status == 0) {
          this.photoInfo = result.body.message[0];
        } else {
          Toast("加载失败！");
        }
      });
    },
    //获取预加载图片------
    getImg(){
      this.$http.get('/api/getthumimages/'+this.id).then((result)=>{
        console.log(result);
      })
    },
    handleClose () {
        console.log('close event')
      }
    
  },
  components:{
    'cm-box':comment
  }
};
</script>

<style scoped>
    .photoInfo-container{
        padding: 0 15px;
    }
    .photoInfo-title{
        color: red;
        font-size: 15px;
        text-align: center;
        margin:15px 0 ;
    }
    .photoInfo-sub{
        display: flex;
        justify-content: space-between;
        font-size: 12px;
    }
    .photoInfo-content{
        line-height: 30px;
        font-size: 14px;
    }
</style>

